@import "variables.scss";
@import "mixins-compat.scss";

// Responsive attributes
// ------------------------------

// hide means hide everywhere
/* Sizes:
  0    <- size < 600  Phone
  600  <- size < 960  Tablet
  960  <- size < 1200 Tablet-Landscape
  1200 <- size         PC
*/
html,body{
    font-family: "Microsoft Yahei",RobotoDraft,Roboto,"Helvetica Neue","Luxi Sans","Hiragino Sans GB",STHeiti;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.layout, .layout-column, .layout-row {
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  min-height: 0;
}

.layout-column {
  @include column();
}

.layout-row {
  @include row();
}

.layout-padding > .flex-sm,
.layout-padding > .flex-lt-md
{
  padding: $layout-gutter-width / 4;
}
.layout-padding,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md,
.layout-padding > .flex-lt-lg
{
  padding: $layout-gutter-width / 2;
}
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg
{
  padding: $layout-gutter-width / 1;
}


.layout-margin > .flex-sm,
.layout-margin > .flex-lt-md
{
  margin: $layout-gutter-width / 4;
}
.layout-margin,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md,
.layout-margin > .flex-lt-lg {
  margin: $layout-gutter-width / 2;
}
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg
{
  margin: $layout-gutter-width / 1;
}



.layout-wrap {
  flex-wrap: wrap;
}

.layout-fill {
  margin: 0;
  min-height: 100%;
  width: 100%;
}
@-moz-document url-prefix() {
  .layout-fill {
    margin: 0;
    width: 100%;
    min-height: auto;
    height: inherit;
  }
}

@mixin flex-order-for-name($suffix: null) {
  $selector: 'flex-order';
  @if $suffix != null {
    $selector: 'flex-order-#{$suffix}';
  }
  .#{$selector}-0 { order: 0; }
  .#{$selector}-1 { order: 1; }
  .#{$selector}-2 { order: 2; }
  .#{$selector}-3 { order: 3; }
  .#{$selector}-4 { order: 4; }
  .#{$selector}-5 { order: 5; }
  .#{$selector}-6 { order: 6; }
  .#{$selector}-7 { order: 7; }
  .#{$selector}-8 { order: 8; }
  .#{$selector}-9 { order: 9; }
}

@mixin layout-for-name($name) {
  .layout-#{$name} {
    box-sizing: border-box;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    min-height: 0;
  }
  .layout-#{$name}-column {
    @include column();
  }
  .layout-#{$name}-row {
    @include row();
  }
}

@mixin offset-for-name($name: null) {
  $offsetName: 'offset';
  @if $name != null {
    $offsetName: 'offset-#{$name}';
  }
  @for $i from 1 through 19 {
    .#{$offsetName}-#{$i * 5} {
      margin-left: #{$i * 5 + '%'};
    }
  }
  .#{$offsetName}-33, .#{$offsetName}-34 {
    margin-left: 33.33%;
  }
  .#{$offsetName}-66, .#{$offsetName}-67 {
    margin-left: 66.66%;
  }
}

@mixin flex-properties-for-name($name: null) {
  $flexName: 'flex';
  @if $name != null {
    $flexName: 'flex-#{$name}';
  }

  .#{$flexName} {
    box-sizing: border-box;
    @include flex();
  }


  // (0-20) * 5 - 0-100%
  @for $i from 0 through 20 {
    .#{$flexName}-#{$i * 5} {
      @include flex(0 0 #{$i * 5 + '%'});
    }
    .layout-row > .#{$flexName}-#{$i * 5} {
      max-width: #{$i * 5 + '%'};
    }
    .layout-column > .#{$flexName}-#{$i * 5} {
      max-height: #{$i * 5 + '%'};
    }
  }

  .#{$flexName}-33, .#{$flexName}-34 {
    @include flex(0 0 33.33%);
  }
  .#{$flexName}-66, .#{$flexName}-67 {
    @include flex(0 0 66.66%);
  }

  .layout-row {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-width: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-width: 66.66%;
    }
  }
  .layout-column {
    > .#{$flexName}-33, > .#{$flexName}-34 {
      max-height: 33.33%;
    }
    > .#{$flexName}-66, > .#{$flexName}-67 {
      max-height: 66.66%;
    }
  }
}

// Alignment attributes for layout containers' children
// Arrange on the Main Axis
// center, start, end, space-between, space-around
// flex-start is the default for justify-content
// ------------------------------

@mixin layout-align-for-name($suffix: null) {
  $name: 'layout-align';
  @if $suffix != null {
    $name: 'layout-align-#{$suffix}';
  }

  // Main Axis Center
  .#{$name}-center, //stretch
  .#{$name}-center-center,
  .#{$name}-center-start,
  .#{$name}-center-end {
    @include justify-content(center);
  }

  // Main Axis End
  .#{$name}-end, //stretch
  .#{$name}-end-center,
  .#{$name}-end-start,
  .#{$name}-end-end {
    @include justify-content(flex-end);
  }

  // Main Axis Space Around
  .#{$name}-space-around, //stretch
  .#{$name}-space-around-center,
  .#{$name}-space-around-start,
  .#{$name}-space-around-end {
    @include justify-content(space-around);
  }

  // Main Axis Space Between
  .#{$name}-space-between, //stretch
  .#{$name}-space-between-center,
  .#{$name}-space-between-start,
  .#{$name}-space-between-end {
    @include justify-content(space-between);
  }


  // Arrange on the Cross Axis
  // center, start, end
  // stretch is the default for align-items
  // ------------------------------

  // Cross Axis Center
  .#{$name}-center-center,
  .#{$name}-start-center,
  .#{$name}-end-center,
  .#{$name}-space-between-center,
  .#{$name}-space-around-center {
    @include align-items(center);
  }

  // Cross Axis Start
  .#{$name}-center-start,
  .#{$name}-start-start,
  .#{$name}-end-start,
  .#{$name}-space-between-start,
  .#{$name}-space-around-start {
    @include align-items(flex-start);
  }

  // Cross Axis End
  .#{$name}-center-end,
  .#{$name}-start-end,
  .#{$name}-end-end,
  .#{$name}-space-between-end,
  .#{$name}-space-around-end {
    @include align-items(flex-end);
  }

}

// Flex attributes for layout children
// ------------------------------

@include flex-properties-for-name();
@include layout-align-for-name();
@include flex-order-for-name();
@include offset-for-name();

/**
 * `hide-gt-sm show-gt-lg` should hide from 600px to 1200px
 * `show-md hide-gt-sm` should show from 0px to 960px and hide at >960px
 * `hide-gt-md show-gt-sm` should show everywhere (show overrides hide)`
 */

// SMALL SCREEN
@media (max-width: $layout-breakpoint-sm - 1) {
  .hide-sm, .hide {
    &:not(.show-sm):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(sm);
  @include layout-align-for-name(sm);
  @include layout-for-name(sm);
  @include offset-for-name(sm);
  @include flex-properties-for-name(sm);
}

// BIGGER THAN SMALL SCREEN
@media (min-width: $layout-breakpoint-sm) {
  @include flex-order-for-name(gt-sm);
  @include layout-align-for-name(gt-sm);
  @include layout-for-name(gt-sm);
  @include offset-for-name(gt-sm);
  @include flex-properties-for-name(gt-sm);
}

// MEDIUM SCREEN
@media (min-width: $layout-breakpoint-sm) and (max-width: $layout-breakpoint-md - 1) {
  .hide, .hide-gt-sm {
    &:not(.show-gt-sm):not(.show-md):not(.show) {
      display: none;
    }
  }
  .hide-md:not(.show-md):not(.show) {
    display: none;
  }

  @include flex-order-for-name(md);
  @include layout-align-for-name(md);
  @include layout-for-name(md);
  @include offset-for-name(md);
  @include flex-properties-for-name(md);
}

// BIGGER THAN MEDIUM SCREEN
@media (min-width: $layout-breakpoint-md) {
  @include flex-order-for-name(gt-md);
  @include layout-align-for-name(gt-md);
  @include layout-for-name(gt-md);
  @include offset-for-name(gt-md);
  @include flex-properties-for-name(gt-md);
}

// LARGE SCREEN
@media (min-width: $layout-breakpoint-md) and (max-width: $layout-breakpoint-lg - 1) {
  .hide, .hide-gt-sm, .hide-gt-md {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-lg):not(.show) {
      display: none;
    }
  }
  .hide-lg:not(.show-lg):not(.show) {
    display: none;
  }

  @include flex-order-for-name(lg);
  @include layout-align-for-name(lg);
  @include layout-for-name(lg);
  @include offset-for-name(lg);
  @include flex-properties-for-name(lg);
}

// BIGGER THAN LARGE SCREEN
@media (min-width: $layout-breakpoint-lg) {
  .hide-gt-sm, .hide-gt-md, .hide-gt-lg, .hide {
    &:not(.show-gt-sm):not(.show-gt-md):not(.show-gt-lg):not(.show) {
      display: none;
    }
  }

  @include flex-order-for-name(gt-lg);
  @include layout-align-for-name(gt-lg);
  @include layout-for-name(gt-lg);
  @include offset-for-name(gt-lg);
  @include flex-properties-for-name(gt-lg);
}

.pct33 {
  width: 33.3%; }

.pct67 {
  width: 66.7%; }

.pct15 {
  width: 15%; }

.pct10 {
  width: 10%; }

.pct20 {
  width: 20%; }

.pct25 {
  width: 25%; }

.pct30 {
  width: 30%; }

.pct35 {
  width: 35%; }

.pct40 {
  width: 40%; }

.pct45 {
  width: 45%; }

.pct50 {
  width: 50%; }

.pct60 {
  width: 60%; }

.pct80 {
  width: 80% !important; }

.pct100 {
  width: 100%; }

.min-pct20 {
  min-width: 20%; }
  
.fullscreen{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
/*转换数字为rem，1=0.1rem*/
@function numToRem($num){
    @return $num * 0.1rem;
}
/*padding 0.1rem~1rem*/
@mixin padding() {
    $selector: 'padding';
    .#{$selector}-1 { padding: numToRem(1);}
    .#{$selector}-2 { padding: numToRem(2);}
    .#{$selector}-3 { padding: numToRem(3);}
    .#{$selector}-4 { padding: numToRem(4);}
    .#{$selector}-5 { padding: numToRem(5);}
    .#{$selector}-6 { padding: numToRem(6);}
    .#{$selector}-7 { padding: numToRem(7);}
    .#{$selector}-8 { padding: numToRem(8);}
    .#{$selector}-9 { padding: numToRem(9);}
    .#{$selector}-10 { padding: numToRem(10);}
}
@mixin paddingLR() {
    $selector: 'padding-lr';
    .#{$selector}-1 { padding-left:numToRem(1);padding-right:numToRem(1);}
    .#{$selector}-2 { padding-left:numToRem(2);padding-right:numToRem(2);}
    .#{$selector}-3 { padding-left:numToRem(3);padding-right:numToRem(3);}
    .#{$selector}-4 { padding-left:numToRem(4);padding-right:numToRem(4);}
    .#{$selector}-5 { padding-left:numToRem(5);padding-right:numToRem(5);}
    .#{$selector}-6 { padding-left:numToRem(6);padding-right:numToRem(6);}
    .#{$selector}-7 { padding-left:numToRem(7);padding-right:numToRem(7);}
    .#{$selector}-8 { padding-left:numToRem(8);padding-right:numToRem(8);}
    .#{$selector}-9 { padding-left:numToRem(9);padding-right:numToRem(9);}
    .#{$selector}-10 { padding-left:numToRem(10);padding-right:numToRem(10);}
}
@mixin paddingTB() {
    $selector: 'padding-tb';
    .#{$selector}-1 { padding-top: numToRem(1);padding-bottom: numToRem(1);}
    .#{$selector}-2 { padding-top: numToRem(2);padding-bottom: numToRem(2);}
    .#{$selector}-3 { padding-top: numToRem(3);padding-bottom: numToRem(3);}
    .#{$selector}-4 { padding-top: numToRem(4);padding-bottom: numToRem(4);}
    .#{$selector}-5 { padding-top: numToRem(5);padding-bottom: numToRem(5);}
    .#{$selector}-6 { padding-top: numToRem(6);padding-bottom: numToRem(6);}
    .#{$selector}-7 { padding-top: numToRem(7);padding-bottom: numToRem(7);}
    .#{$selector}-8 { padding-top: numToRem(8);padding-bottom: numToRem(8);}
    .#{$selector}-9 { padding-top: numToRem(9);padding-bottom: numToRem(9);}
    .#{$selector}-10 { padding-top: numToRem(10);padding-bottom: numToRem(10);}
}
@mixin textAlign() {
    $selector: 'text';
    .#{$selector}-center {text-align: center;}
    .#{$selector}-left {text-align: left;}
    .#{$selector}-right {text-align: right;}
}
@include padding();
@include paddingLR();
@include paddingTB();
@include textAlign();
.font-tip {
    font-size: 1.5rem;
}
.color-success{
  color: $bd-success;
}
.color-gray {
    color: #808080;
}
.bgcolor-dark{
    background-color: #36353B !important;
}
.bgcolor-white{
    background-color: $baseBgColor;
}
md-toolbar{
    min-height: 48px !important;
    font-size: 16px !important;
}
md-toolbar-row{
    height: 48px !important;
}

[md-raised-button], 
[md-fab], 
[md-mini-fab], 
[md-button], 
[md-icon-button], 
md-toolbar, 
.md-tab-label,
md-tab-group,
button{
    font-family: "Microsoft Yahei",RobotoDraft,Roboto,"Helvetica Neue","Luxi Sans","Hiragino Sans GB",STHeiti !important;
}
/*home*/
.home-root{
    md-grid-tile{
      figure{
          border-right: 1px solid #e8edf1;
          border-bottom: 1px solid #e8edf1;
      }
  }
}
/*home*/

/*table*/
.table{
    md-ink-bar{
        background-color: #7D4725 !important;
    }
    div.md-tab-header {
        color: #FFFFFF;
        background: #FA8D4A;
    }
    .md-tab-body.md-active{
        padding: 0.5rem;
    }
}
/*table*/
div.mat-list-item{
    height: auto !important;
    padding: 0 !important;
    font-family: "Microsoft Yahei",RobotoDraft,Roboto,"Helvetica Neue","Luxi Sans","Hiragino Sans GB",STHeiti !important;
}

md-content{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
table-detail{
    md-sidenav-container{
        md-content{
            display: flex !important;
        }
    }
    .mat-list-item{
         flex-direction: column !important;
    }
}

mpj-dialog.bottom-dialog{
    .ui-dialog{
        bottom:0 !important;
        left:0 !important;
        top: inherit !important;
        width: 100%;
    }
}

mpj-dialog.bottom-dialog{
    .ui-dialog{
        bottom:0 !important;
        left:0 !important;
        top: inherit !important;
        width: 100%;
    }
}

mpj-dialog.top-dialog{
    .ui-dialog{
        width: 100%;
        max-width: 100%;
        min-width: initial;
        top: 0 !important;;
        border-radius: 0 !important;
    }
}
mpj-dialog.full-dialog{
    .ui-dialog{
        width: 100%;
        max-width: 100%;
        height:100%;
        left: 0 !important;
        bottom: 0 !important;
        min-width: initial;
        top: 0 !important;;
        border-radius: 0 !important;
    }
}
mpj-dialog.full-dialog-slideleft{
    .ui-dialog{
        width: 100%;
        max-width: 100%;
        height:100%;
        bottom: 0 !important;
        min-width: initial;
        top: 0 !important;;
        border-radius: 0 !important;
    }
}
mpj-dialog{
  .center-dialog {
      top: 20% !important;
      left: 50% !important;
      margin-left: -45% !important;
      width: 90% !important;
  }
}
@media (min-width: $layout-breakpoint-sm){
    mpj-dialog{
      .center-dialog {
          margin-left: -35% !important;
          width: 70% !important;
      }
    }
}

.grid-name{
    border-bottom:1px solid $color-gray;   
}
.radius-5{
    border-radius: 5px;
}
.no-radius{
    border-radius: 0 !important;
}
.border-circle{
    border-radius: 50%;
}
.border-list{
    border-bottom: 1px solid $baseBorderColor;
}
.subText{
    font-size: 0.5rem;
}
.table-tab-ctrl{
    position: fixed;
    background-color: $brand-primary;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
}
.tab-pre-ctrl{
    left: 0px;
}
.tab-next-ctrl{
    right: 0px;
}
.tab-ctrl-disable{
    display: none;
}
.desc{
    font-size: 0.9rem;
    opacity: 0.7;
}
.triangle-icon-down{
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 8px solid #000000;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
}
.back-drop{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
}
.md-tab-header{
    color: #FFFFFF;
    background-color: $brand-primary;
}

.auto-flex{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    min-height: 0;
}

.disable-btn{
    pointer-events: none;
}

.noshrink{
    @include shrink(0)
}
.order-mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background-color: rgba(1, 1, 1, 0.3);
}